<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>评价</title>
<meta name="description" content="js星级评论打分系统，制作鼠标滑过星级提示星级描述，点击星级评论打分效果。js代码" />

<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;}
body{color:#666;font:12px/1.5 Arial;}
/* star */
#star{position:relative;width:600px;margin:20px auto;height:24px;}
#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
#star ul{margin:0 10px;}
#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(images/star.png) no-repeat;}
#star strong{color:#f60;padding-left:10px;}
#star li.on{background-position:0 -28px;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(images/icon.gif) no-repeat;padding:7px 10px 0;}
#star p em{color:#f60;display:block;font-style:normal;}    @font-face {            font-family: 'iconfont';  /* project id 247957 */            src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot');            src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot?#iefix') format('embedded-opentype'),            url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.woff') format('woff'),            url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.ttf') format('truetype'),            url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.svg#iconfont') format('svg');        }        .iconfont {            font-family:"iconfont" !important;            font-size:16px;            font-style:normal;            -webkit-font-smoothing: antialiased;            -webkit-text-stroke-width: 0.2px;            -moz-osx-font-smoothing: grayscale;        }        body{            font-family: "microsoft yahei";        }        ul,li{            list-style: none;            padding:0;            margin:0;        }        a{            text-decoration: none;        }        .clearfix:after {            content: ".";            display: block;            height: 0;            clear: both;            visibility: hidden;        }        .order-evaluation {            width: 827px;            border: 2px solid #E84E40;            background: #fff;            z-index: 200;            margin:50px auto;        }        .order-evaluation{            padding:22px;        }        .order-evaluation h4{            font-size:18px;            color:#333333;            padding-bottom:20px;            border-bottom:1px dashed #dbdbdb;        }        .order-evaluation p{            font-size:14px;            color:#999;            line-height:45px;            margin-bottom:0;        }        .order-evaluation .order-evaluation-text{            font-size:16px;            color:#333;            line-height:40px;            width:809px;            padding-left:15px;            background:#f3f3f3;            margin-bottom:25px;            margin-top:20px;        }        .order-evaluation-checkbox ul li{            width:142px;            height:43px;            border:1px solid #e8e8e8;            text-align: center;            background: #fff;            font-size:14px;            color:#333333;            line-height:43px;            margin-right:25px;            margin-bottom:25px;            float:left;            cursor: pointer;            overflow: hidden;            position:relative;        }        .order-evaluation-checkbox ul li.checked i{            display: block;        }        .order-evaluation-checkbox ul li.checked{            border:1px solid #e84c3d;        }        .order-evaluation .order-evaluation-textarea{            position:relative;            width: 784px;            height: 210px;        }        .order-evaluation .order-evaluation-textarea textarea{            width:793px;            height:178px;            border:1px solid #e8e8e8;            position:absolute;            top:0;            left:0;            line-height:22px;            padding:15px;            color:#666;        }        .order-evaluation .order-evaluation-textarea span{            position:absolute;            bottom:10px;            font-size:12px;            color:#999;            right:10px;        }        .order-evaluation .order-evaluation-textarea span em{            color:#e84c3d;        }        .order-evaluation>a{            width:154px;            height:48px;            border-radius: 6px;            display: block;            text-align: center;            line-height:48px;            background:#f36a5a;            float:right;            margin-top:20px;            color:#fff;            font-size:14px;        }        .order-evaluation-checkbox ul li i {            display: none;            color: #e84c3d;            position: absolute;            right: -4px;            bottom: -14px;            font-size: 20px;        }        .order-evaluation>a:hover{            background: #e84c3d;        }        .block li label,.con span{ font-size: 18px; margin-right: 20px; line-height: 23px;}        .block li span{display: inline-block; vertical-align: middle; cursor: pointer;}        .block li span img{margin-right: -5px; }        .level{color:#e84c3d;font-size:16px;margin-left:15px;position: relative;top: 3px;}        .dmlei_tishi_info{            height:70px;border-radius: 10px;background: rgba(0,0,0,0.5);font-size:18px;color:#fff;text-align: center;line-height: 70px;position:fixed;            left: 48%;            display: none;            margin-left: -128px;            top: 40%;            margin-top: -35px;            padding: 0 15px;            z-index: 1000;        }
</style>

<script type="text/javascript"> 
window.onload = function (){

	var oStar = document.getElementById("star");
	var aLi = oStar.getElementsByTagName("li");
	var oUl = oStar.getElementsByTagName("ul")[0];
	var oSpan = oStar.getElementsByTagName("span")[1];
	var oP = oStar.getElementsByTagName("p")[0];
	var i = iScore = iStar = 0;
	var aMsg = [
				"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
				"不满意|部分有破损，与卖家描述的不符，不满意",
				"一般|质量一般，没有卖家描述的那么好",
				"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
				"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
				]
	
	for (i = 1; i <= aLi.length; i++){
		aLi[i - 1].index = i;
		
		//鼠标移过显示分数
		aLi[i - 1].onmouseover = function (){
			fnPoint(this.index);			level = this.index;
			//浮动层显示
			oP.style.display = "block";
			//计算浮动层位置
			oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
			//匹配浮动层文字内容
			oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
		};
		
		//鼠标离开后恢复上次评分
		aLi[i - 1].onmouseout = function (){
			fnPoint();
			//关闭浮动层
			oP.style.display = "none"
		};
		
		//点击后进行评分处理
		aLi[i - 1].onclick = function (){
			iStar = this.index;
			oP.style.display = "none";			level = this.index;
			oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
		}
	}
	
	//评分处理
	function fnPoint(iArg){
		//分数赋值
		iScore = iArg || iStar;
		for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";	
	}
	
};
</script>
</head>
<body>
<div class="order-evaluation clearfix">    <h4>评价</h4>    <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>    <div class="block">        <div id="star">		<span></span>		<ul>			<li><a href="javascript:;">1</a></li>			<li><a href="javascript:;">2</a></li>			<li><a href="javascript:;">3</a></li>			<li><a href="javascript:;">4</a></li>			<li><a href="javascript:;">5</a></li>		</ul>		<span></span>		<p></p>	</div>    </div>    <div class="order-evaluation-text" style="height: 20px;">    </div>    <div class="order-evaluation-textarea">        <textarea name="content" id="TextArea1" onkeyup="words_deal();" ></textarea>        <span>还可以输入<em id="textCount">140</em>个字</span>    </div>    <a href="javascript:;" id="order_evaluation">评价完成</a></div> <div id="order_evaluate_modal" class="dmlei_tishi_info"></div> </body><script type="text/javascript" src="/ssm/consumer/js/jquery-1.4.3.min.js"></script><script>    /*     * 根据index获取 str     * **/	var level = 0;    function byIndexLeve(index){        var str ="";        switch (index)        {            case 0:                str="差评";                break;            case 1:                str="较差";                break;            case 2:                str="中等";                break;            case 3:                str="一般";                break;            case 4:                str="好评";                break;        }        return str;    }    //  星星数量    var stars = [        ['x2.png', 'x1.png', 'x1.png', 'x1.png', 'x1.png'],        ['x2.png', 'x2.png', 'x1.png', 'x1.png', 'x1.png'],        ['x2.png', 'x2.png', 'x2.png', 'x1.png', 'x1.png'],        ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x1.png'],        ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x2.png'],    ];    $(".block li").find("img").hover(function(e) {        var obj = $(this);        var index = obj.index();        if(index < (parseInt($(".block li").attr("data-default-index")) -1)){            return ;        }        var li = obj.closest("li");        var star_area_index = li.index();        for (var i = 0; i < 5; i++) {            li.find("img").eq(i).attr("src", "http://7xnlea.com2.z0.glb.qiniucdn.com/" + stars[index][i]);//切换每个星星        }        $(".level").html(byIndexLeve(index));    }, function() {    })     $(".block li").hover(function(e) {    }, function() {        var index = $(this).attr("data-default-index");//点击后的索引        index = parseInt(index);        console.log("index",index);        $(".level").html(byIndexLeve(index-1));        console.log(byIndexLeve(index-1));        $(".order-evaluation ul li:eq(0)").find("img").attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png");        for (var i=0;i<index;i++){             $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x2.png");        }    })    $(".block li").find("img").click(function() {        var obj = $(this);        var li = obj.closest("li");        var star_area_index = li.index();        var index1 = obj.index();        li.attr("data-default-index", (parseInt(index1)+1));        var index = $(".block li").attr("data-default-index");//点击后的索引        index = parseInt(index);        console.log("index",index);        $(".level").html(byIndexLeve(index-1));        console.log(byIndexLeve(index-1));        $(".order-evaluation ul li:eq(0)").find("img").attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png");        for (var i=0;i<index;i++){            $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x2.png");        }     });    //印象    $(".order-evaluation-check").click(function(){        if($(this).hasClass('checked')){            //当前为选中状态，需要取消            $(this).removeClass('checked');        }else{            //当前未选中，需要增加选中            $(this).addClass('checked');        }    });    //评价字数限制    function words_deal()    {        var curLength=$("#TextArea1").val().length;        if(curLength>140)        {            var num=$("#TextArea1").val().substr(0,140);            $("#TextArea1").val(num);            alert("超过字数限制，多出的字将被截断！" );        }        else        {            $("#textCount").text(140-$("#TextArea1").val().length);        }    }        function getQueryString(name) {	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");	    var r = window.location.search.substr(1).match(reg);	    if (r != null) return decodeURI(r[2]); return null;	}     $("#order_evaluation").click(function(){    	var postData={				score:level,				itemid:getQueryString("itemid"),				comment:$("#TextArea1").val()			}    	console.log(postData);		if(postData.score&&postData.comment){	        $.post("/ssm/order/updateComment.do",postData,function(data){	        	$("#order_evaluate_modal").html("感谢您的评价！么么哒(* ￣3)(ε￣ *)").show().delay(3000).hide(500);	        	location.href='/ssm/consumer/myOrder.html';	        })		}else{			alert("请完成评分再提交");		}    }) </script>
</html>